import React, {Component,} from "react"
import {connect} from 'react-redux'

// components
import SteamerCard from "../../../shared-components/SteamerCard/SteamerCard"
// antd-mobile
import {WingBlank, WhiteSpace, Modal,} from "antd-mobile"
// style sheet
import './OnLive.css'
// mock data
import {steamers,} from '../../../utils/mockdata'
import CustomButton from "../../../shared-components/CustomButton/CustomBotton";
import QRCodeImg  from "../../../res/images/web/vedio/二维码.png"


function closest(el, selector) {
    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
    while (el) {
        if (matchesSelector.call(el, selector)) {
            return el;
        }
        el = el.parentElement;
    }
    return null;
}

class OnLive extends Component {

    constructor(props) {
        super(props)
        this.history = this.props.history
        this.bannerData = {
            imgUrl: 'https://www.huya.com/public/main/jpg/%E6%8B%9B%E5%8B%9F%E4%BB%A41_322124684561073.jpg',
            title: '体育直播',
        }
        this.bannerStyle = {
            background: `no-repeat center/cover url(${this.bannerData.imgUrl})`,
        }
        this.state = {
            downloadModal: false,
        }
    }

    componentDidMount() {
        // const isLogin = this.props.isLogin
        // isLogin && this.props.doFetchLiveList({p: 1,})
    }

    showDownloadModal = (e) => {
        e.preventDefault()
        this.setState({
            downloadModal: true,
        })
    }

    onWrapTouchStart = (e) => {
        // fix touch to scroll background page on iOS
        if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
            return;
        }
        const pNode = closest(e.target, '.am-modal-content');
        if (!pNode) {
            e.preventDefault();
        }
    }

    onModalClose = () => {
        this.setState({
            downloadModal: false,
        })
    }

    render() {
        const bannerTemplate = <div className='video-on-live-banner' style={this.bannerStyle}/>

        const steamersList = steamers.map(s => <SteamerCard
            onClickShowModal={this.showDownloadModal}
            steamer={s}
            key={s.id}
        />)

        const steamersTemplate = (
            <div className='video-on-live-steamers'>
                {steamersList}
            </div>
        )

        const modalTitle = <div>
            <h3 className='mg-b-1'>打开App 更多精彩内容</h3>
            <div
                className='flex-space-around-align-center'
            >
                <div>
                    <img src={QRCodeImg} alt='' className='mg-b-1'/>
                    <CustomButton size='mid' extrastyle={{width: '100px', height: '32px', lineHeight: '32px'}}>iOS版本</CustomButton>
                </div>
                <div>
                    <img src={QRCodeImg} alt='' className='mg-b-1'/>
                    <CustomButton size='mid' extrastyle={{width: '100px', height: '32px', lineHeight: '32px'}}>安卓版本</CustomButton>
                </div>
            </div>
        </div>

        return (
            <WingBlank>
                <WhiteSpace size='xl' />
                {bannerTemplate}
                <WhiteSpace size='xl'/>
                {steamersTemplate}
                <Modal
                    visible={this.state.downloadModal}
                    transparent
                    maskClosable={true}
                    onClose={this.onModalClose}
                    // title="Title"
                    title={modalTitle}
                    wrapProps={{ onTouchStart: this.onWrapTouchStart }}
                />
            </WingBlank>
        )
    }

}

const mapState = state => ({
    isLogin: state.global.isLogin,
})

const mapDispatch = dispatch => ({
    doFetchLiveDetail: (payload) => dispatch.live.doFetchLiveDetail(payload),
    doFetchLiveList: (payload) => dispatch.live.doFetchLiveList(payload),
})

export default connect(mapState, mapDispatch)(OnLive)
